<template>
  <vue-office-docx v-if="srcName.endsWith('docx')"
    :src="srcUrl"
    style="height: 100vh;"
    @rendered="renderedHandler"
    @error="errorHandler"
  />
  <vue-office-excel v-else-if="srcName.endsWith('xlsx')"
    :src="srcUrl"
    :options="xlsxoptions"
    style="height: 100vh;"
    @rendered="renderedHandler"
    @error="errorHandler"
  />
  <vue-office-excel v-else-if="srcName.endsWith('xls')"
    :src="srcUrl"
    :options="xlsoptions"
    style="height: 100vh;"
    @rendered="renderedHandler"
    @error="errorHandler"
  />
  <vue-office-pdf v-else-if="srcName.endsWith('pdf')"
    :src="srcUrl"
    style="height: 100vh"
    @rendered="renderedHandler"
    @error="errorHandler"
  />
  <video v-else-if="srcName.endsWith('mp4') || srcName.endsWith('mov') "
    oncontextmenu="return false;"
    :src="srcUrl"
    :style="`width: 100% `"
    class="w-[218px] h-[140px] rounded-[4px] bg-second video"
    controls
    autoplay
    disablePictureInPicture
    :controlsList="'noremoteplayback noplaybackrate'"
  >
    <source />
  </video>
  <iframe v-else-if="srcName.endsWith('pptx') "
    id="iframe"
    :src="`/PPTXjs/index.html?file=` + srcUrl"
    :style="{ height: '100vh', width: '100%' }"
  ></iframe>
  <vue-office-pdf v-else=""
                  :src="srcUrl"
                  style="height: 100vh"
                  @rendered="renderedHandler"
                  @error="errorHandler"
  />
</template>

<script>
  //引入VueOfficePdf组件
  import VueOfficePdf from '@vue-office/pdf'
  //引入VueOfficeDocx组件
  import VueOfficeDocx from '@vue-office/docx'
  //引入相关样式
  import '@vue-office/docx/lib/index.css'
  //引入VueOfficeExcel组件
  import VueOfficeExcel from '@vue-office/excel'
  //引入相关样式
  import '@vue-office/excel/lib/index.css'

  export default {
    props: {
      srcUrl: {
        type: String,
        required: true
      },
      srcName: {
        type: String,
        required: true
      },

    },
    data() {
      return {
        xlsxoptions:{
          xls: false,       //预览xlsx文件设为false；预览xls文件设为true
          minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
          minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
          widthOffset: 10,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
          heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
          beforeTransformData: (workbookData) => {return workbookData}, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
          transformData: (workbookData) => {return workbookData}, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
        },
        xlsoptions:{
          xls: true,       //预览xlsx文件设为false；预览xls文件设为true
          minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
          minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
          widthOffset: 10,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
          heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
          beforeTransformData: (workbookData) => {return workbookData}, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
          transformData: (workbookData) => {return workbookData}, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
        },
      }
    },
    components: {
      VueOfficeDocx,
      VueOfficeExcel,
      VueOfficePdf
    },
    methods: {
      renderedHandler() {
        console.log("渲染完成")
      },
      errorHandler() {
        console.log("渲染失败")
        this.$emit('previewFail');
        window.open(this.srcUrl)
      }
    }
  }
</script>
